<template>
  <div>
    <HETTable1
      ref="loginLogTable"
      :tableData="data.tableData"
      :tHead="data.tHead"
      :total="data.total"
      @getTableData="getLoginLogList"
    >
      <template #timestamp>
        <el-table-column label="操作时间">
          <template #default="scope">
            {{ moment(scope.row.timestamp).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
      </template>
    </HETTable1>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, markRaw } from "vue";
import moment from "moment";

import { req_getLoginLogs, req_getLoginLogsCount } from "~/utils/axios/index.js";

const loginLogTable = ref();

onMounted(() => {});
const data = reactive({
  tHead: [
    {label: "操作时间", prop: "timestamp", isCustom: true, slotName: "timestamp",},
    {label: "用户", prop: "user", isCustom: false,},
    {label: "用户IP", prop: "user_ip", isCustom: false,},
    {label: "执行动作", prop: "operationName", isCustom: false,},
  ],
  tableData: [],
  total: null,
});

// 获取表格数据
const getLoginLogList = async (initTableParams, $filter) => {
  loginLogTable.value.loading();
  let params = {
    $skip: initTableParams.page * initTableParams.size,
    $limit: initTableParams.size,
  };
  try {
    const { data: res } = await req_getLoginLogs(params);
    const { data: count } = await req_getLoginLogsCount();
    loginLogTable.value.finish();
    data.tableData = res || [];
    data.total = count || 0;
  } catch (err) {
    loginLogTable.value.finish();
  }
};
</script>

<style lang="scss" scoped></style>
